import React from 'react'
import { Carousel } from 'antd-mobile';
import Nav from 'components/nav';

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions} from '../../reducers'

import {get, post} from '../../axios'
import moment from 'moment'
import history from '../../history'
import wxshare from '../../components/wx-share'
import utils from '../../common/utils';

class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: ['1', '2', '3'],
            imgHeight: 176,
            slideIndex: 0,
            categories: [],
            project: []
        }
    }

    componentDidMount() {
        // simulate img loading
        setTimeout(() => {
          this.setState({
            data: [
                'https://ceoja-1251886366.cos.ap-guangzhou.myqcloud.com/banner.jpg', 
                'https://ceoja-1251886366.cos.ap-guangzhou.myqcloud.com/banner.jpg', 
                'https://ceoja-1251886366.cos.ap-guangzhou.myqcloud.com/banner.jpg', 
            ],
          });
        }, 100);

        get('mem/project-category').then(resp => {
            this.setState({categories: resp.data});
        });

        this.get_project()

        
    }

    get_project() {
        get(`mem/project?limit=${10}`).then(resp => {
            this.setState({project: resp.data})
        })
    }

    render() {
        return (
            <React.Fragment>
                <div className="home margin">
                    <Carousel
                    autoplay={true}
                    infinite
                    selectedIndex={1}
                    >
                    {this.state.data.map(val => (
                        <a
                        key={val}
                        href=""
                        style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                        >
                        <img
                            src={`${val}`}
                            alt=""
                            style={{ width: '100%', verticalAlign: 'top' }}
                            onLoad={() => {
                            // fire window resize event to change height
                            window.dispatchEvent(new Event('resize'));
                            this.setState({ imgHeight: 'auto' });
                            }}
                        />
                        </a>
                    ))}
                    </Carousel>

                    <div className="container">
                        <div className="row">
                            <div className="class-list clearfix">
                            {this.state.categories.map(x => (
                                <dl key={x.id} className="col-xs-3">
                                    <dt><a onClick={()=>history.push(`/archive/${x.id}`)}><img src={x.url} /></a></dt>
                                    <dd><a>{x.name}</a></dd>
                                </dl>
                            ))}
                                <dl className="col-xs-3">
                                    <dt><a><img src="https://ceoja-1251886366.cos.ap-guangzhou.myqcloud.com/b8.png" /></a></dt>
                                    <dd><a>更多</a></dd>
                                </dl>
                            </div>
                            <div className='hr'/>
                        </div>

                        <div className="row">
                            <div className="new-project clearfix">
                                <div className="title">
                                    <span>最新项目</span>
                                    <a>&gt;</a>
                                </div>
                                <div className="content">
                                    <ProjectList list={this.state.project} user={this.props.userInfo}/>
                                </div>
                            </div>
                            <div className='hr'></div>
                        </div>
                    </div>
                </div>
            <Nav />    
            </React.Fragment>
        )
    }
}

const ProjectList = ({list, user}) => 
    <React.Fragment>
        {list.map(x => <ProjectItem project={x} user={user} key={x.id}/>)}
    </React.Fragment>

const ProjectItem = ({project, user}) => {
    let _class = () => {
        switch (project.status) {
            case 'done':
                return 'a2'
            case 'draft':
                return 'a3'
            case 'pending':
                return 's1'    
            default:
                return ''
        }
    },
    url = utils.reslove_detail_url(project, user)
    // onClick={()=>history.push(url)}
    return   <dl className="clearfix" >
                <dt className="col-xs-4"><a><img src="https://ceoja-1251886366.cos.ap-guangzhou.myqcloud.com/a5.jpg" /></a></dt>
                <dd className="col-xs-8">
                    <div className="p1"><a>{project.title}</a></div>
                    <div className="p2">
                        <span className={_class()}>
                            <em>{project.format_status}</em>
                            <i>{project.project_category.name}</i>
                        </span>
                        <label>{moment(project.created_at).format('YYYY-MM-DD hh:mm')}</label>
                    </div>
                </dd>
            </dl>
}

function mapStateToProps(state) {
    return {
        userInfo: state.user.userInfo
    }
}
  
function mapDispatchToProps(dispatch) {
    return  {
    }
}
  
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Home)
